<template>
  <div class="container el-card__body">
    <el-card>
      <el-row class="rowbtn">
        <el-col :offset="21" :span="2"
          ><el-button
            type="success"
            class="btn1"
            icon="el-icon-edit"
            @click="$router.push('/questions/new')"
            >新增试题</el-button
          ></el-col
        >
      </el-row>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="value1">
              <el-select
                v-model="form.value1"
                placeholder="请选择"
                style="width:100%"
                @change="change1"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="value2">
              <el-select
                v-model="form.value2"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="value3">
              <el-select
                v-model="form.value3"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="input1">
              <el-input v-model="form.input1"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="value4">
              <el-select
                v-model="form.value4"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in options4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="value5">
              <el-select
                v-model="form.value5"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in options5"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="value6">
              <el-select
                v-model="form.value6"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in options6"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="value7">
              <el-select
                v-model="form.value7"
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in options7"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="input2">
              <el-input v-model="form.input2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="input3">
              <el-input v-model="form.input3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                v-model="value8"
                placeholder="请选择"
                style="width:50%"
                @change="change2"
              >
                <el-option
                  v-for="(item, index) in options8"
                  :key="index"
                  :label="item"
                  :value="index"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="value9"
                placeholder="请选择"
                style="width:50%"
              >
                <el-option
                  v-for="(item, index) in options9"
                  :key="index"
                  :label="item"
                  :value="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :offset="3" :span="3">
            <el-button @click="closeForm">清除</el-button>
            <el-button type="primary" @click="getSearchForm()">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-tabs v-model="chkState" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="4"
          ><questions-choice-list
            :counts="counts"
            :list="searchForm"
            @updateChkState="getSearchForm()"
            @btnclick="btnclick"
          ></questions-choice-list
        ></el-tab-pane>
        <el-tab-pane label="待审核" name="0"
          ><questions-choice-list
            :counts="counts"
            :list="searchForm"
            @updateChkState="getSearchForm()"
            @btnclick="btnclick"
          ></questions-choice-list
        ></el-tab-pane>
        <el-tab-pane label="已审核" name="1"
          ><questions-choice-list
            :counts="counts"
            :list="searchForm"
            @updateChkState="getSearchForm()"
            @btnclick="btnclick"
          ></questions-choice-list
        ></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"
          ><questions-choice-list
            :counts="counts"
            :list="searchForm"
            @updateChkState="getSearchForm()"
            @btnclick="btnclick"
          ></questions-choice-list
        ></el-tab-pane>
      </el-tabs>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="counts"
        background
      >
      </el-pagination>

      <el-dialog title="题目预览" :visible.sync="flag" width="60%">
        <questions-preview v-if="flag" :id="id"></questions-preview>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="flag = false">关闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { simple as subjectsList } from '@/api/hmmm/subjects.js'
import { simple as directorysSimple } from '@/api/hmmm/directorys.js'
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
import { simple as usersList } from '@/api/base/users.js'
import { choice as questionsChoice } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { parseTime } from '@/utils/index.js'
import questionsChoiceList from '../components/questions-choice-list.vue'
import questionsPreview from '../components/questions-preview.vue'
import Vue from 'vue'
Vue.filter('relativeTime', date => {
  return parseTime(date)
})
export default {
  components: {
    questionsChoiceList,
    questionsPreview
  },
  data() {
    return {
      form: {
        input1: '',
        input2: '',
        input3: '',
        value1: '',
        value2: '',
        value3: '',
        value4: '',
        value5: '',
        value6: '',
        value7: ''
      },
      options1: [],
      options2: [],
      options3: [],
      options4: [
        {
          value: '1',
          label: '单选'
        },
        {
          value: '2',
          label: '多选'
        },
        {
          value: '3',
          label: '简答'
        }
      ],
      options5: [
        {
          value: '1',
          label: '简单'
        },
        {
          value: '2',
          label: '一般'
        },
        {
          value: '3',
          label: '困难'
        }
      ],
      options6: [
        {
          value: '1',
          label: 'o2o'
        },
        {
          value: '2',
          label: '外包服务'
        },
        {
          value: '3',
          label: '企业服务'
        },
        {
          value: '4',
          label: '互联网金融'
        },
        {
          value: '5',
          label: '企业咨询'
        },
        {
          value: '6',
          label: '互联网'
        },
        {
          value: '7',
          label: '电子商务'
        },
        {
          value: '8',
          label: '其他'
        }
      ],
      options7: [],
      options8: provinces(),
      options9: [],
      value8: '',
      value9: '',
      chkState: '4',
      counts: 0,
      searchForm: [],
      page: 1,
      pagesize: 5,
      flag: false,
      id: ''
    }
  },
  created() {
    this.getlist()
    this.getuserList()
    this.getSearchForm()
  },
  mounted() {},
  methods: {
    async getlist() {
      try {
        const { data } = await subjectsList()
        this.options1 = data
      } catch (err) {
        this.$message.error('获取失败')
      }
    },
    async change1() {
      try {
        const { data: data1 } = await directorysSimple({ id: this.value1 })
        this.options2 = data1
        const { data: data2 } = await tagsSimple({ id: this.value1 })
        console.log(data2)
        this.options3 = data2
      } catch (err) {
        this.$message.error('获取失败')
      }
    },
    async getuserList() {
      try {
        const { data } = await usersList({ keyword: '' })
        this.options7 = data
      } catch (err) {
        this.$message.error('获取失败')
      }
    },
    change2() {
      this.options9 = citys(this.options8[this.value8])
    },
    closeForm() {
      this.$refs.form.resetFields()
      this.value8 = ''
      this.value9 = ''
    },
    handleClick() {
      this.getSearchForm()
    },
    async getSearchForm() {
      try {
        const { data } = await questionsChoice({
          page: this.page,
          pagesize: this.pagesize,
          subjectID: this.form.value1 || null,
          catalogID: this.form.value2 || null,
          tags: this.form.value3
            ? this.options3[this.form.value3].tagName
            : null,
          keyword: this.form.input1 || null,
          questionType: this.form.value4 || null,
          difficulty: this.form.value5 || null,
          direction: this.form.value6 || null,
          creatorID: this.form.value7 || null,
          remarks: this.form.input2 || null,
          shortName: this.form.input3 || null,
          province: this.options8[this.value8] || null,
          city: this.options9[this.value9] || null,
          chkState:
            this.chkState === '4' || !this.chkState ? null : this.chkState
        })
        this.searchForm = data.items
        this.counts = data.counts
      } catch (err) {
        this.$message.error('获取失败')
      }
    },
    handleSizeChange(newSize) {
      this.pagesize = newSize
      this.getSearchForm()
    },
    handleCurrentChange(newPage) {
      this.page = newPage
      this.getSearchForm()
    },
    btnclick(id) {
      this.flag = true
      this.id = id
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.rowbtn {
  margin-bottom: 15px;
  .btn1 {
    width: 120px;
    margin-left: 40px;
  }
}
.el-table {
  margin: 15px 0;
}

.el-pagination {
  float: right;
  margin-bottom: 15px;
}
</style>
